<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>操作当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
	<style>
		li input{
			cursor: pointer;
		}
	</style>
	<script>
		function jiesuan(){
			let d=document.querySelector("#cartList");
			let uls=d.children;
			let total=0;
			for (let i = 1; i < uls.length-1; i++) {
				let u=uls[i];
				let price=u.children[2].lastElementChild.value;
				let am=u.children[3].children[1].value;
				total+=price*am;
			}
			alert("总价："+total);
		}
		//给数量-1
		function incrNum(t){
			if(t.nextElementSibling.value<=1){
				return;
			}
			t.nextElementSibling.value--;
			
			let num=t.nextElementSibling.value;//数量
			let price=t.parentNode.previousElementSibling.lastElementChild.value;
			t.parentNode.nextElementSibling.innerHTML="￥"+(num*price).toFixed(2);
			
		}
		
		function incr(t){
			t.previousElementSibling.value++;
			let num=t.previousElementSibling.value;//数量
			let price=t.parentNode.previousElementSibling.lastElementChild.value;
			t.parentNode.nextElementSibling.innerHTML="￥"+(num*price).toFixed(2);
		}
		function doT(t){
			//console.log("输入框变了");
			let num=t.value;//数量
			let price=t.parentNode.previousElementSibling.lastElementChild.value;
			t.parentNode.nextElementSibling.innerHTML="￥"+(num*price).toFixed(2);
		}
	</script>
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span >关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <li>商品图片</li>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>总价</li>
            <li>操作</li>
        </ul>
        <ul>
            <li><img src="images/dog.jpg"></li>
            <li>我和狗狗活下来了</li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="incrNum(this)"><input type="text" name="amount" value="1" onchange="doT(this)"><input type="button" name="plus" value="+" onclick="incr(this)"></li>
            <li id="price0">¥21.90</li>
            <li><p  onclick="collection();">移入收藏</p><p>删除</p></li>
        </ul>
        <ul>
            <li><img src="images/mai.jpg"></li>
            <li>灰霾来了怎么办</li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="incrNum(this)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick=""></li>
            <li id="price1">¥24.00</li>
            <li><p  >移入收藏</p><p>删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">商品总计：<span></span></li>
            <li><span onclick="jiesuan()">结 算</span></li>
        </ol>
    </div>
</div>
</body>
</html>